<script module lang="ts">
    import { defineMeta } from "@storybook/addon-svelte-csf";
    import ColorPicker from "./ColorPicker.svelte";
    import { BothSide } from "../BothSide";
    import { Checkbox } from "../Checkbox";
    import { Space } from "../Space";
    import { Avatar } from "../Avatar";
    import Icon from "../Common/Icons/Icon.svelte";

    const { Story } = defineMeta({
        title: "Components/Form/ColorPicker",
        component: ColorPicker,
        tags: ["autodocs"],
        argTypes: {},
        args: {},
    });

    let value = $state<string>("#19be6b");
</script>

<Story name="Default">
    {#snippet template(args)}
        <ColorPicker bind:value onchange={(v) => console.log(v)} />
        <ColorPicker />
    {/snippet}
</Story>

<Story name="Alpha">
    {#snippet template(args)}
        <ColorPicker value={"rgba(25, 190,107, .5)"} alpha />
    {/snippet}
</Story>

<Story name="Recommend">
    {#snippet template(args)}
        <ColorPicker value={"#19be6b"} recommend />
        <ColorPicker value={"#19be6b"} recommend colors={["#311B92", "#512DA8", "#673AB7", "#9575CD", "#D1C4E9"]} />
    {/snippet}
</Story>

<Story name="Size">
    {#snippet template(args)}
        <Space>
            <ColorPicker value={"#19be6b"} size="large" />
            <ColorPicker value={"#19be6b"} />
            <ColorPicker value={"#19be6b"} size="small" />
        </Space>
    {/snippet}
</Story>
